<!--
 * @Author: your name
 * @Date: 2020-08-24 11:03:28
 * @LastEditTime: 2020-08-25 13:17:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tinkjsDemo\antd-vue-pro\src\views\d3Demo\echartsMap.vue
-->
<template>
<div>
    <chart ref="china" :options="options" auto-resize style="width:800px;height:500px" @click="clickHandler"></chart>
</div>
</template>

<script>
import {
    ChinaData
} from 'china-map-geojson';
import echarts from 'echarts';

function randomValue() {
    return Math.round(Math.random() * 1000);
}
const dataList = [{
        name: "南海诸岛",
        value: 0
    },
    {
        name: '北京',
        value: randomValue()
    },
    {
        name: '天津',
        value: randomValue()
    },
    {
        name: '上海',
        value: randomValue()
    },
    {
        name: '重庆',
        value: randomValue()
    },
    {
        name: '河北',
        value: randomValue()
    },
    {
        name: '河南',
        value: randomValue()
    },
    {
        name: '云南',
        value: randomValue()
    },
    {
        name: '辽宁',
        value: randomValue()
    },
    {
        name: '黑龙江',
        value: randomValue()
    },
    {
        name: '湖南',
        value: randomValue()
    },
    {
        name: '安徽',
        value: randomValue()
    },
    {
        name: '山东',
        value: randomValue()
    },
    {
        name: '新疆',
        value: randomValue()
    },
    {
        name: '江苏',
        value: randomValue()
    },
    {
        name: '浙江',
        value: randomValue()
    },
    {
        name: '江西',
        value: randomValue()
    },
    {
        name: '湖北',
        value: randomValue()
    },
    {
        name: '广西',
        value: randomValue()
    },
    {
        name: '甘肃',
        value: randomValue()
    },
    {
        name: '山西',
        value: randomValue()
    },
    {
        name: '内蒙古',
        value: randomValue()
    },
    {
        name: '陕西',
        value: randomValue()
    },
    {
        name: '吉林',
        value: randomValue()
    },
    {
        name: '福建',
        value: randomValue()
    },
    {
        name: '贵州',
        value: randomValue()
    },
    {
        name: '广东',
        value: randomValue()
    },
    {
        name: '青海',
        value: randomValue()
    },
    {
        name: '西藏',
        value: randomValue()
    },
    {
        name: '四川',
        value: randomValue()
    },
    {
        name: '宁夏',
        value: randomValue()
    },
    {
        name: '海南',
        value: randomValue()
    },
    {
        name: '台湾',
        value: randomValue()
    },
    {
        name: '香港',
        value: randomValue()
    },
    {
        name: '澳门',
        value: randomValue()
    }
]

export default {
    mounted() {

    },
    created() {
        echarts.registerMap('china', ChinaData);
    },
    methods: {
        clickHandler(data) {
            console.log(data.name);
        }
    },
    data() {
        return {
            options: {
                tooltip: {
                    formatter: function (params, ticket, callback) {
                        // console.log('params:', params);
                        return params.seriesName + '<br />' + params.name + '：' + params.value
                    } //数据格式化
                },
                visualMap: {
                    min: 0,
                    max: 1100,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], //取值范围的文字
                    inRange: {
                        color: ['#e0ffff', '#006edd'] //取值范围的颜色
                    },
                    show: true //图注
                },
                geo: {
                    map: 'china',
                    roam: false, //不开启缩放和平移
                    zoom: 1.23, //视角缩放比例
                    label: {
                        normal: {
                            show: true,
                            fontSize: '10',
                            color: 'rgba(0,0,0,0.7)'
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis: {
                            areaColor: '#F3B329', //鼠标选择区域颜色
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                series: [{
                    name: '信息量',
                    type: 'map',
                    geoIndex: 0,
                    // nameProperty: 'name_local',
                    data: dataList
                }]
            }
        }
    }
}
</script>

<style lang="less">

</style>
